import { Link } from 'react-router'

var NavHeader = React.createClass({
    render:function(){
        return (
            <div className="navbar-header   bg-info dker">
                <a href="#/" className="navbar-brand text-lt">
                    <i className="fa fa-btc"></i>
                    <img src="img/logo.png" alt="." className="hide"/>
                    <span className="hidden-folded m-l-xs">BPP</span>
                </a>
            </div>

        );

    }
})
//快捷方式
var Shortcut = React.createClass({
    render:function(){
        return (
            <hr></hr>
        );
    }
})
var NavCollapse = React.createClass({
    render:function(){
        return (
            <div className="collapse pos-rlt navbar-collapse box-shadow bg-info dker">
                <div className="nav navbar-nav hidden-xs">
                    <a href className="btn no-shadow navbar-btn">
                        <i className="fa fa-dedent fa-fw"></i>
                    </a>
                </div>
                <ul className="nav navbar-nav hidden-sm">
                    <li className="dropdown pos-stc" dropdown>
                        <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                            快捷导航
                            <b className="caret"></b>
                        </a>
                        <div className="dropdown-menu wrapper w-full bg-white">
                            <div className="row">
                                <div className="col-sm-4">
                                    <div className="m-l-xs m-t-xs m-b-xs font-bold">Pages <span className="badge badge-sm bg-success">10</span></div>
                                    <div className="row">
                                        <div className="col-xs-6">
                                            <ul className="list-unstyled l-h-2x">
                                                <li>
                                                    <a href><i className="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Profile</a>
                                                </li>
                                                <li>
                                                    <a href><i
                                                        className="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Post</a>
                                                </li>
                                                <li>
                                                    <a href><i className="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Search</a>
                                                </li>
                                                <li>
                                                    <a href><i className="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Invoice</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div className="col-xs-6">
                                            <ul className="list-unstyled l-h-2x">
                                                <li>
                                                    <a href><i
                                                        className="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Price</a>
                                                </li>
                                                <li>
                                                    <a href><i className="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Lock
                                                        screen</a>
                                                </li>
                                                <li>
                                                    <a href><i className="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sign in</a>
                                                </li>
                                                <li>
                                                    <a href><i className="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sign up</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>
                <div>
                <ul className="nav navbar-nav hidden-sm">

                    <li className="dropdown" dropdown>
                        <a href="#" className="dropdown-toggle" data-toggle="dropdown">

                            <span>消息</span>
                            <span className="caret"></span>
                        </a>

                        <ul className="dropdown-menu" role="menu">
                            <li><a href="#">项目</a></li>
                            <li>
                                <a href>
                                    <span className="badge bg-info pull-right">5</span>
                                    <span>任务</span>
                                </a>
                            </li>
                            <li><a href>用户</a></li>
                            <li className="divider"></li>
                            <li>
                                <a href>
                                    <span className="badge bg-danger pull-right">4</span>
                                    <span>邮件</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                </div>
                <ul className="nav navbar-nav navbar-right">
                    <li className="dropdown hidden-sm" is-open="lang.isopen" dropdown>
                        <a href className="dropdown-toggle" dropdown-toggle>
                            中文 <b className="caret"></b>
                        </a>
                    </li>
                    <ul className="dropdown-menu animated fadeInRight w">
                        <li>
                            <a href>中文</a>
                        </li>
                        <li>
                            <a href>英文</a>
                        </li>
                    </ul>
                    <li className="hidden-xs">
                        <a ui-fullscreen></a>
                    </li>
                    <li className="dropdown" dropdown>
                        <a href className="dropdown-toggle" dropdown-toggle>
                            <i className="icon-bell fa-fw"></i>
                            <span className="visible-xs-inline">Notifications</span>
                            <span className="badge badge-sm up bg-danger pull-right-xs">2</span>
                        </a>
                        <div className="dropdown-menu w-xl animated fadeInUp">
                            <div className="panel bg-white">
                                <div className="panel-heading b-light bg-light">
                                    <strong>You have <span>2</span> notifications</strong>
                                </div>
                                <div className="list-group">
                                    <a href className="media list-group-item">

                                      <span className="media-body block m-b-none">
                                        Use awesome animate.css<br/>
                                          <small className="text-muted">10 minutes ago</small>
                                      </span>
                                    </a>
                                    <a href className="media list-group-item">
                                        <span className="media-body block m-b-none">
                                            1.0 initial released<br/>
                                            <small className="text-muted">1 hour ago</small>
                                        </span>
                                    </a>
                                    <div className="panel-footer text-sm">
                                        <a href className="pull-right"><i className="fa fa-cog"></i></a>
                                        <a href="#notes" data-toggle="class:show animated fadeInRight">See all the
                                            notifications</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li className="dropdown" dropdown>
                        <a href className="dropdown-toggle clear" dropdown-toggle>
                            <span className="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                                <img src="img/a0.jpg" alt="..."/>
                                <i className="on md b-white bottom"></i>
                            </span>
                            <span className="hidden-sm hidden-md">John.Smith</span>
                            <b className="caret"></b>
                        </a>
                        <ul className="dropdown-menu animated fadeInRight w">
                            <li className="wrapper b-b m-b-sm bg-light m-t-n-xs">
                                <div>
                                    <p>300mb of 500mb used</p>
                                </div>
                                <progressbar value="60" className="progress-xs m-b-none bg-white"></progressbar>
                            </li>
                            <li>
                                <a href>
                                    <span className="badge bg-danger pull-right">30%</span>
                                    <span>Settings</span>
                                </a>
                            </li>
                            <li>
                                <a ui-sref="app.page.profile">Profile</a>
                            </li>
                            <li>
                                <a ui-sref="app.docs">
                                    <span className="label bg-info pull-right">new</span>
                                    Help
                                </a>
                            </li>
                            <li className="divider"></li>
                            <li>
                                <a ui-sref="access.signin">Logout</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        );
    }
});

var MainHeader = React.createClass({
    render:function(){
        return (
            <div className="app-header  navbar ">
                <NavHeader/>
                <NavCollapse/>
            </div>
        );
    }
});


var MainRight = React.createClass({
    render:function(){
        return (
            <div className="app-content">
                <div ui-butterbar></div>
                <a href className="off-screen-toggle hide" ui-toggle-class="off-screen" data-target=".app-aside"></a>
                <div className="app-content-body fade-in-up">
                    <div className="hbox hbox-auto-xs hbox-auto-sm" ng-init="app.settings.asideFolded = false;app.settings.asideDock = false;">
                        <div className="col">
                            <div className="bg-light lter b-b wrapper-md">
                                <div className="row">
                                    <div className="col-sm-6 col-xs-12">
                                        <h1 className="m-n font-thin h3 text-black">工作台</h1>
                                        <small className="text-muted">欢迎进入BPP平台</small>
                                    </div>
                                    <div className="col-sm-6 text-right hidden-xs">
                                        <div className="inline m-r text-left">
                                            <div className="m-b-xs">1290 <span class="text-muted">items</span></div>
                                            <div ng-init="data1=[ 106,108,110,105,110,109,105,104,107,109,105,100,105,102,101,99,98 ]"
                                                 ui-jq="sparkline"
                                                 ui-options=" {type:'bar', height:20, barWidth:5, barSpacing:1, barColor:'#dce5ec'}"
                                                 className="sparkline inline">loading...
                                            </div>
                                        </div>
                                        <div className="inline text-left">
                                            <div className="m-b-xs">$30,000 <span class="text-muted">revenue</span></div>
                                            <div ng-init="data2=[ 105,102,106,107,105,104,101,99,98,109,105,100,108,110,105,110,109 ]"
                                                 ui-jq="sparkline"
                                                 ui-options=" {type:'bar', height:20, barWidth:5, barSpacing:1, barColor:'#dce5ec'}"
                                                 className="sparkline inline">loading...
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="wrapper-md">

                                <div className="row">
                                    <div className="col-md-5">
                                        <div className="row row-sm text-center">
                                            <div className="col-xs-6">
                                                <div className="panel padder-v item">
                                                    <a ui-sref="app.ProcessDef.task">
                                                        <div className="h1 text-info font-thin h1">521</div>
                                                        <span className="text-muted text-xs">{this.props.children}待办事项</span>

                                                        <div className="top text-right w-full">
                                                            <i className="fa fa-caret-down text-warning m-r-sm"></i>
                                                        </div>
                                                    </a>
                                                </div>

                                            </div>
                                            <div className="col-xs-6">
                                                <a href className="block panel padder-v bg-primary item">
                                                    <span className="text-white font-thin h1 block">930</span>
                                                    <span className="text-muted text-xs">Uploads</span>
                                                    <span className="bottom text-right w-full">
                                                      <i className="fa fa-cloud-upload text-muted m-r-sm"></i>
                                                    </span>
                                                </a>
                                            </div>
                                            <div className="col-xs-6">
                                                <a href className="block panel padder-v bg-info item">
                                                    <span className="text-white font-thin h1 block">432</span>
                                                    <span className="text-muted text-xs">Comments</span>
                <span className="top text-left">
                  <i className="fa fa-caret-up text-warning m-l-sm"></i>
                </span>
                                                </a>
                                            </div>
                                            <div className="col-xs-6">
                                                <div className="panel padder-v item">
                                                    <div className="font-thin h1">129</div>
                                                    <span className="text-muted text-xs">Feeds</span>

                                                    <div className="bottom text-left">
                                                        <i className="fa fa-caret-up text-warning m-l-sm"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-xs-12 m-b-md">
                                                <div className="r bg-light dker item hbox no-border">
                                                    <div className="col w-xs v-middle hidden-md">
                                                        <div ng-init="data1=[60,40]" ui-jq="sparkline"
                                                             ui-options="{{data1}}, {type:'pie', height:40, sliceColors:['{{app.color.warning}}','#fff']}"
                                                             className="sparkline inline"></div>
                                                    </div>
                                                    <div className="col dk padder-v r-r">
                                                        <div className="text-primary-dk font-thin h1"><span>$12,670</span></div>
                                                        <span className="text-muted text-xs">Revenue, 60% of the goal</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-md-7">
                                        <div className="panel wrapper">
                                            <label className="i-switch bg-warning pull-right" ng-init="showSpline=true">
                                                <input type="checkbox" ng-model="showSpline"/>
                                                <i></i>
                                            </label>
                                            <h4 className="font-thin m-t-none m-b text-muted">Latest Campaign</h4>

                                            <div ui-jq="plot" ui-refresh="showSpline" ui-options="
                                              [
                                                { data: , label:'TV', points: { show: true, radius: 1}, splines: { show: showSpline, tension: 0.4, lineWidth: 1, fill: 0.8 } },
                                                { data: , label:'Mag', points: { show: true, radius: 1}, splines: { show: showSpline, tension: 0.4, lineWidth: 1, fill: 0.8 } }
                                              ],
                                              {
                                                colors: [],
                                                series: { shadowSize: 3 },
                                                xaxis:{ font: { color: '#a1a7ac' } },
                                                yaxis:{ font: { color: '#a1a7ac' }, max:20 },
                                                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#dce5ec' },
                                                tooltip: true,
                                                tooltipOpts: { content: 'Visits of %x.1 is %y.4',  defaultTheme: false, shifts: { x: 10, y: -25 } }
                                              }
                                            " >
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="panel wrapper">
                                    <div className="row">
                                        <div className="col-md-6 b-r b-light no-border-xs">
                                            <a href className="text-muted pull-right text-lg"><i class="icon-arrow-right"></i></a>
                                            <h4 className="font-thin m-t-none m-b-md text-muted">My Tasks</h4>

                                            <div className=" m-b">
                                                <div className="m-b">
                                            <span className="label text-base bg-warning pos-rlt m-r"><i
                                                className="arrow right arrow-warning"></i> 19:30</span>
                                                    <a href>Feed cat</a>
                                                </div>
                                                <div className="m-b">
                                            <span className="label text-base bg-info pos-rlt m-r"><i
                                                className="arrow right arrow-info"></i> 12:30</span>
                                                    <a href>Fishing Time</a>
                                                </div>
                                                <div className="m-b">
                                            <span className="label text-base bg-primary pos-rlt m-r"><i
                                                className="arrow right arrow-primary"></i> 10:30</span>
                                                    <a href>Kick-off meeting</a>
                                                </div>
                                                <div className="m-b">
                                            <span className="label text-base bg-light pos-rlt m-r"><i
                                                className="arrow right arrow-light"></i> 07:30</span>
                                                    <a href>Morning running</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <div className="row row-sm">
                                                <div className="col-xs-6 text-center">
                                                    <div ui-jq="easyPieChart" ui-options="{
                    percent: 75,
                    lineWidth: 4,
                    trackColor: '',
                    barColor: '',
                    scaleColor: false,
                    size: 115,
                    rotate: 90,
                    lineCap: 'butt'
                  }" className="inline m-t">
                                                        <div>
                                                            <span className="text-primary h4">75%</span>
                                                        </div>
                                                    </div>
                                                    <div className="text-muted font-bold text-xs m-t m-b">Work Done</div>
                                                </div>
                                                <div className="col-xs-6 text-center">
                                                    <div ui-jq="easyPieChart" ui-options="{
                    percent: 50,
                    lineWidth: 4,
                    trackColor: '',
                    barColor: '',
                    scaleColor: false,
                    size: 115,
                    rotate: 180,
                    lineCap: 'butt'
                  }" className="inline m-t">
                                                        <div>
                                                            <span className="text-info h4">50%</span>
                                                        </div>
                                                    </div>
                                                    <div className="text-muted font-bold text-xs m-t m-b">Started</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

var MainCenter = React.createClass({
    render:function(){
        return (
            <div className="app-aside-right pos-fix no-padder w-md w-auto-xs bg-white b-l animated fadeInRight hide">

                <div className="vbox">
                    <div className="wrapper b-b b-t b-light m-b">
                        <a href className="pull-right text-muted text-md" ui-toggle-class="show" target=".app-aside-right"><i
                            className="icon-close"></i></a>
                        Chat
                    </div>
                    <div className="row-row">
                        <div className="cell">
                            <div className="cell-inner padder">
                                <div class="m-b">
                                    <a href className="pull-left thumb-xs avatar"><img src="img/a2.jpg" alt="..."/></a>

                                    <div className="clear">
                                        <div className="pos-rlt wrapper-sm b b-light r m-l-sm">
                                            <span className="arrow left pull-up"></span>

                                            <p className="m-b-none">Hi John, What's up...</p>
                                        </div>
                                        <small className="text-muted m-l-sm"><i class="fa fa-ok text-success"></i> 2 minutes ago</small>
                                    </div>
                                </div>
                                <div className="m-b">
                                    <a href className="pull-right thumb-xs avatar"><img src="img/a3.jpg" class="img-circle"
                                                                                        alt="..."/></a>

                                    <div className="clear">
                                        <div className="pos-rlt wrapper-sm bg-light r m-r-sm">
                                            <span className="arrow right pull-up arrow-light"></span>

                                            <p className="m-b-none">Lorem ipsum dolor :)</p>
                                        </div>
                                        <small className="text-muted">1 minutes ago</small>
                                    </div>
                                </div>
                                <div className="m-b">
                                    <a href className="pull-left thumb-xs avatar"><img src="img/a2.jpg" alt="..."/></a>

                                    <div className="clear">
                                        <div className="pos-rlt wrapper-sm b b-light r m-l-sm">
                                            <span className="arrow left pull-up"></span>

                                            <p className="m-b-none">Great!</p>
                                        </div>
                                        <small className="text-muted m-l-sm"><i className="fa fa-ok text-success"></i>Just Now</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="wrapper m-t b-t b-light">
                        <form className="m-b-none">
                            <div className="input-group">
                                <input type="text" className="form-control" placeholder="Say something"/>
                                    <span className="input-group-btn">
                                      <button className="btn btn-default" type="button">SEND</button>
                                    </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
});


var MainFoot = React.createClass({
    render:function(){
        return (
            <div className="app-footer wrapper b-t bg-light">
        <span className="pull-right">1.0.0 <a href ui-scroll="app" className="m-l-sm text-muted"><i
            className="fa fa-long-arrow-up"></i></a></span>
                &copy; 20161 Copyright.
            </div>
        );
    }
});


export default React.createClass({
    render() {
        return (
            <div>
                <MainHeader/>

                <div className="app-aside hidden-xs bg-light dker b-r">
                    <div className="aside-wrap">
                        <div className="navi-wrap">
                            <nav ui-nav className="navi">
                                <ul className="nav" role="nav">
                                    <li className="hidden-folded padder m-t m-b-sm text-muted text-xs">
                                        <span>审批管理</span>
                                    </li>
                                    <li className="active">
                                        <a href className="auto">
                                        <span className="pull-right text-muted">
                                            <i className="fa fa-fw fa-angle-right text"></i>
                                            <i className="fa fa-fw fa-angle-down text-active"></i>
                                        </span>
                                            <b className="label bg-primary pull-right">2</b>
                                            <i className="glyphicon glyphicon-list"></i>
                                            <span>流程管理</span>
                                        </a>
                                        <ul className="nav nav-sub dk">
                                            <li className="auto active "><Link to="/processDef"><span>流程定义</span></Link></li>
                                        </ul>
                                    </li>
                                </ul>
                                <ul className="nav" role="nav">
                                    <li className="hidden-folded padder m-t m-b-sm text-muted text-xs">
                                        <span>基础平台</span>
                                    </li>
                                    <li className="active">
                                        <a href className="auto">
                                        <span className="pull-right text-muted">
                                            <i className="fa fa-fw fa-angle-right text"></i>
                                            <i className="fa fa-fw fa-angle-down text-active"></i>
                                        </span>
                                            <b className="label bg-primary pull-right">2</b>
                                            <i className="glyphicon glyphicon-list"></i>
                                            <span>权限管理</span>
                                        </a>
                                        <ul className="nav nav-sub dk">
                                            <li className="auto active "><Link to="/userManager"><span>用户管理</span></Link></li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </div>

                    </div>
                </div>
                <div className="app-content">
                    {this.props.children}
                </div>
                <MainCenter/>
                <MainFoot/>
            </div>
        )
    }
})